<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>Yuan | City</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="../css/themify-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/elegant-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="../css/nice-select.css" type="text/css">
    <link rel="stylesheet" href="../css/jquery-ui.min.css" type="text/css">
    <link rel="stylesheet" href="../css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <link rel="stylesheet" href="../css/susu.css" type="text/css">
    <!-- Js Plugins -->
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../js/jquery.countdown.min.js"></script>
    <script src="../js/jquery.nice-select.min.js"></script>
    <script src="../js/jquery.zoom.min.js"></script>
    <script src="../js/jquery.dd.min.js"></script>
    <script src="../js/jquery.slicknav.js"></script>
    <script src="../js/owl.carousel.min.js"></script>


</head>
<!--头部引入-->
<div class="su_head ">
</div>

<!--内容-->

<!-- Contact Section Begin -->
<section class="contact-section spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-5">
                <div class="contact-title">
                    <h4>加入我们</h4>
                    <p style="margin-left: 50px;"></p>
                </div>
                <div class="contact-widget">
                    <div class="cw-item">
                        <div class="ci-icon">
                            <i class="ti-layout-cta-right"></i>
                        </div>
                        <div class="ci-text">
                            <span>姓名:</span>
                            <p>苏源</p>
                        </div>
                    </div>
                    <div class="cw-item">
                        <div class="ci-icon">
                            <i class="ti-location-pin"></i>
                        </div>
                        <div class="ci-text">
                            <span>地址:</span>
                            <p>广西科技师范学院-数学与计算机科学学院</p>
                        </div>
                    </div>
                    <div class="cw-item">
                        <div class="ci-icon">
                            <i class="ti-mobile"></i>
                        </div>
                        <div class="ci-text">
                            <span>电话:</span>
                            <p>+88 88.888.888</p>
                        </div>
                    </div>
                    <div class="cw-item">
                        <div class="ci-icon">
                            <i class="ti-email"></i>
                        </div>
                        <div class="ci-text">
                            <span>邮箱:</span>
                            <p>1796644863@qq.com</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 offset-lg-1">
                <div class="contact-form">
                    <div class="leave-comment">
                        <h4>留&nbsp;言</h4>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;谢谢您提出的问题和意见，祝您生活愉快！</p>
                        <form  id="comment" class="comment-form">
                            <div class="row">
                                <div class="col-lg-6">
                                    <input type="text" placeholder="Your name" value=""/>
                                </div>
                                <div class="col-lg-6">
                                    <input type="text" placeholder="Your email"/>
                                </div>
                                <div class="col-lg-12 text-right">
                                    <textarea placeholder="Your message"></textarea>
                                    <button type="button" onclick="sen()" class="site-btn" >发送消息</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Contact Section End -->

<div class="map spad " style="margin-top: -35px">
    <div class="container">
        <div class="map-inner" style="margin-left: 230px;">
            <iframe
                    src="./map.html"
                    height="610" style="border:0" allowfullscreen="">
            </iframe>

            <div class="icon">
                <i class="fa fa-map-marker"></i>
            </div>
        </div>
    </div>
</div>
<!-- Map Section Begin -->





<!-- Footer Section Begin -->
<footer class="footer-section">
    <div class="copyright-reserved container">
        <div class="row">
            <div class="col-lg-12">
                <div class="copyright-text" style="text-align: center;">
                    Copyright &copy;<script>document.write(new Date().getFullYear());</script> Yuan City
                </div>
            </div>

        </div>
    </div>

</footer>
<!-- Footer Section End -->

</body>
<script type="text/javascript">

    //调用公共头部
    $('.su_head').load('head.html');
    $(document).ready(function () {
        //获取导航栏
        $.ajax({
            type: 'get',
            url: '/ayuancity/categorys/getcategoryAndtype',
            success: function (res) {
                // console.log( $('.su_nav').text())
                for (let i = 0; i < res.content.data.length; i++) {

                    let nav = res.content.data[i];
                    var category =
                        `
							<li id="${nav.categoryName}" class="${nav.categoryName}" >
							<a href="itemsPage.html?categoryName=${nav.categoryName}">${nav.categoryName}</a>
							`;
                    var drop = '';
                    var type = '';
                    if (nav.types.length > 0) {
                        drop = ` <ul class="dropdown "  >`
                        for (let j = 0; j < nav.types.length; j++) {
                            type = type + `<li><a href="itemsPage.html?categoryName=${nav.categoryName}&typeName=${nav.types[j].typeName}">${nav.types[j].typeName}</a></li>`

                        }
                        type = type + `</ul>`
                    }
                    var template = category + drop + type + ` </li>`;
                    $('.su_nav').append(template);

                }

                let url = location.href;
                let categoryName = new URL(url).searchParams.get('categoryName');
                $('.' + categoryName).addClass("active")

            }

        });

        // 判断是否登录 已登录 显示昵称
        let citytoken = sessionStorage.getItem('citytoken');
        if (citytoken) {
            $.ajax({
                type: 'GET',
                url: '/city/user/info',
                data: {
                    token: citytoken
                },
                success: function (json) {
                    if (json.success) {
                        let username = json.content.user.userName;

                        sessionStorage.setItem('userId',json.content.user.userId);
                        // console.log(json)
                        $('#yuan-login').html(username);
                        // $('#user-showname').html(showname);
                        $('#yuan-login').attr('data-toggle', 'dropdown');
                        $('#yuan-userImg').removeClass("hidden");
                        $('#yuan-userImg').removeClass("hidden");
                        $('#yuan-userImg').attr("src",json.content.user.userImg);

                        //发布内容
                        $('#nicknamecomment').attr('value',json.content.user.userName );
                        $('#emailcomment').attr('value', json.content.user.userEmail);
                    }
                }
            });
        };




        $("#addressmother").children("select").remove()

        let adtemplate=  `<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" style="height: 48px;weight:30px;border: 2px solid #c5464a; " type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    城市
     <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">北海</a></li>
    <li><a href="#">来宾</a></li>
    <li><a href="#">合浦</a></li>
    <li><a href="#">南宁</a></li>
    <li><a href="#">柳州</a></li>
  </ul>
</div>
        `
        $("#addressmother").append(adtemplate)
        $('.ui.selection.dropdown').dropdown();
    });


    function loginout() {
        $.ajax({
            type: 'POST',
            url: '/city/user/OutLogin',
            success: function (json) {
                if (json.success) {
                    sessionStorage.removeItem('citytoken');
                    alert("欢迎下次登录")
                    location.href = 'index.html';
                }
            }
        });
    }

    console.log("打开慢的话，可能是你没网~，因为地图引用的是在线百度地图")
    function sen(){
        let com=document.getElementById("comment");
        // let inputList=com.getElementsByTagName('input');
        // 往后端发送消息
        alert("发送成功！");


    }

</script>



<!-- Js Plugins -->
<script src="../js/main.js"></script>
</html>